---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";

img[alt=without_DAP] { width: 60%; height: 60%; }
img[alt=with_DAP] { width: 75%; height: 75%; }
img[alt=init-launch] { width: 80%; height: 80%; }
img[alt=stop-continue-terminate] { width: 80%; height: 80%; }
img[alt=breakpoint] { width: 80%; height: 80%; }

html {
	position: relative;
	min-height: 100%;
}

body {
	letter-spacing: .25px;
	text-rendering: optimizeLegibility;
	color: #242628;
}

.single-page {
	padding: 40px 0;
}

.bg-primary {
	background-color: #2753e3 !important;
  }

.header-container {
  color: #fff;

  @media (min-width: 576px) {
  	margin-bottom: 80px;
  }

  h1 {
	margin-top: 15px;
	font-weight: bold;
  }

  .intro {
	  text-align: center;
  }

  .intro-text {
	  margin: 0 auto;
	  max-width: 450px;
	  text-align: center;
  }
}

h2 {
	margin-bottom: 20px;
}

.toc {
	font-size: 85%
}

.toc-title {
	padding-left: 0.5rem
}

.toc-h1 {
	padding-top: 0.5rem;
	padding-left: 0.5rem;
	margin-bottom: 0;
}

.toc-link {
	padding: 0.125rem 0.5rem;
	color: #707070
}

.anchor {
	display: block;
}

pre[class=highlight] {
	padding: 9.5px;
	overflow: auto;
	font-size: 85%;
	line-height: 1.45;
	background-color: #f6f8fa;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #f6f8fa
}

.highlight .hll {
	background-color: #EFEFEF
}

.highlight .c {
	color: #525151
}

.highlight .err {
	color: #525151
}

.highlight .k {
	color: #8959A8
}

.highlight .l {
	color: #85450A
}

.highlight .n {
	color: #525151
}

.highlight .o {
	color: #545454
}

.highlight .p {
	color: #525151
}

.highlight .cm {
	color: #525151
}

.highlight .cp {
	color: #525151
}

.highlight .c1 {
	color: #525151
}

.highlight .cs {
	color: #525151
}

.highlight .gd {
	color: #C82829
}

.highlight .ge {
	font-style: italic
}

.highlight .gh {
	color: #545454;
	font-weight: bold
}

.highlight .gi {
	color: #5B7201
}

.highlight .gp {
	color: #5B7201;
	font-weight: bold
}

.highlight .gs {
	font-weight: bold
}

.highlight .gu {
	color: #3E999F;
	font-weight: bold
}

.highlight .kc {
	color: #8959A8
}

.highlight .kd {
	color: #8959A8
}

.highlight .kn {
	color: #3E999F
}

.highlight .kp {
	color: #4271AE
}

.highlight .kr {
	color: #8959A8
}

.highlight .kt {
	color: #EAB700
}

.highlight .ld {
	color: #5B7201
}

.highlight .m {
	color: #85450A
}

.highlight .s {
	color: #5B7201
}

.highlight .na {
	color: #4271AE
}

.highlight .nb {
	color: #4271AE
}

.highlight .nc {
	color: #EAB700
}

.highlight .no {
	color: #EAB700
}

.highlight .nd {
	color: #3E999F
}

.highlight .ni {
	color: #545454
}

.highlight .ne {
	color: #C82829
}

.highlight .nf {
	color: #4271AE
}

.highlight .nl {
	color: #545454
}

.highlight .nn {
	color: #EAB700
}

.highlight .nx {
	color: #4271AE
}

.highlight .py {
	color: #545454
}

.highlight .nt {
	color: #3E999F
}

.highlight .nv {
	color: #C82829
}

.highlight .ow {
	color: #3E999F
}

.highlight .w {
	color: #545454
}

.highlight .mf {
	color: #85450A
}

.highlight .mh {
	color: #85450A
}

.highlight .mi {
	color: #85450A
}

.highlight .mo {
	color: #85450A
}

.highlight .sb {
	color: #5B7201
}

.highlight .sc {
	color: #545454
}

.highlight .sd {
	color: #525151
}

.highlight .s2 {
	color: #5B7201
}

.highlight .se {
	color: #85450A
}

.highlight .sh {
	color: #5B7201
}

.highlight .si {
	color: #85450A
}

.highlight .sx {
	color: #5B7201
}

.highlight .sr {
	color: #5B7201
}

.highlight .s1 {
	color: #5B7201
}

.highlight .ss {
	color: #5B7201
}

.highlight .bp {
	color: #545454
}

.highlight .vc {
	color: #C82829
}

.highlight .vg {
	color: #C82829
}

.highlight .vi {
	color: #C82829
}

.highlight .il {
	color: #85450A
}

.more-info {
	padding: 100px 0;

	p {
		padding: 0;
	}
}

.footer {
	padding: 15px 0;
	color: #000;
	background: #e9ecef;

	@media (min-width: 576px) {
		padding: 50px 0;
	}

	img {
		width: 100px;
	}

	a#footer-microsoft-link {
		display: block;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	.github-button-container {
		vertical-align: middle;
	}

	.message {
		display: inline-block;
		padding-right: 10px;
	}

	.links {
		padding-bottom: 10px;

		@media (min-width: 576px) {
			padding: 0;
		}

		li {
			list-style: none;
			padding-bottom: 10px;

			@media (min-width: 576px) {
				display: inline-flex;
				padding: 0;
			}
		}
	}

	iframe {
		position: relative;
		top: 5px;
	}
}

@media (min-width: 992px) {
	.dap-navbar {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 1071;
	}

	.dap-sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 100px;
		z-index: 1000;
		height: calc(100vh - 110px);
		overflow: auto;
	}

	h3 .anchor, h4 .anchor, h5 .anchor {
		scroll-margin-top: 60px;
	}
}

@media (max-width: 991px) {
	.dap-sidebar {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
}

.dap-sidebar .card {
	padding-top: 1px;
}

.navbar-brand h1 {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.nav .nav-link:hover {
	color: #1034a8 !important;
}

a {
	color: #216fc9;
}

a h3 {
	padding-top: 2px;
	padding-bottom: 2px;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link {
	color: white;
}

.docs-nav {
	h4 {
		display: inline-block;
		font-size: 14px;
	}
}
